<template>
  <div>
    <el-table
      border
      :data="tableData"
      :span-method="arraySpanMethod"
      style="width: 100%"
    >
      <el-table-column label="ID" prop="id" width="180" />
      <el-table-column label="Name" prop="name" />
      <el-table-column label="Amount 1" prop="amount1" sortable />
      <el-table-column label="Amount 2" prop="amount2" sortable />
      <el-table-column label="Amount 3" prop="amount3" sortable />
    </el-table>

    <el-table
      border
      :data="tableData"
      :span-method="objectSpanMethod"
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column label="ID" prop="id" width="180" />
      <el-table-column label="Name" prop="name" />
      <el-table-column label="Amount 1" prop="amount1" />
      <el-table-column label="Amount 2" prop="amount2" />
      <el-table-column label="Amount 3" prop="amount3" />
    </el-table>
  </div>
</template>

<script lang="ts">
  export default {
    data() {
      return {
        tableData: [
          {
            id: '12987122',
            name: 'Tom',
            amount1: '234',
            amount2: '3.2',
            amount3: 10,
          },
          {
            id: '12987123',
            name: 'Tom',
            amount1: '165',
            amount2: '4.43',
            amount3: 12,
          },
          {
            id: '12987124',
            name: 'Tom',
            amount1: '324',
            amount2: '1.9',
            amount3: 9,
          },
          {
            id: '12987125',
            name: 'Tom',
            amount1: '621',
            amount2: '2.2',
            amount3: 17,
          },
          {
            id: '12987126',
            name: 'Tom',
            amount1: '539',
            amount2: '4.1',
            amount3: 15,
          },
        ],
      }
    },
    methods: {
      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          return [0, 0]
        } else if (columnIndex === 1) {
          return [0, 0]
        }
      },

      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          if (rowIndex % 2 === 0) {
            return {
              rowspan: 2,
              colspan: 1,
            }
          } else {
            return {
              rowspan: 0,
              colspan: 0,
            }
          }
        }
      },
    },
  }
</script>
